<script>
import { getThinkApi } from '@/api';
export default {
  data() {
    return {
      key: '',
      // 保存联想后的结果
      thinkList: [],
      timer: null,
      historyList: JSON.parse(window.localStorage.getItem('history')) || []
    };
  },
  methods: {
    inputFn() {
      if (!this.key) {
        clearTimeout(this.timer)
        return
      }
      clearTimeout(this.timer)
      this.timer = setTimeout(async () => {
        const res = await getThinkApi({q: this.key})
        const reg = new RegExp(this.key, 'ig')
        this.thinkList = res.data.data.options.map(item => {
          // return item.replace(this.key, `<span style="color: red">${this.key}</span>`)
          return item.replace(reg, `<span style="color: red">${this.key}</span>`)
        })
      }, 500)
    },
    toResult() {
      if(!this.key) return
      this.$router.push(`/search/result?key=${this.key}`)
      this.saveToLocal(this.key)
    },
    toThinkResult(item) {
      item = item.replaceAll(`<span style="color: red">${this.key}</span>`, this.key)
      this.$router.push(`/search/result?key=${item}`)
    },
    toHistoryResult(item) {
      this.$router.push(`/search/result?key=${item}`)
    },
    saveToLocal(item) {
      this.historyList.unshift(item)
      this.historyList = [...new Set(this.historyList)]
      if (this.historyList.length > 5) this.historyList.splice(5)
      window.localStorage.setItem('history', JSON.stringify(this.historyList))
    },
    clear() {
      this.$dialog.confirm({
        title: '警告',
        message: '是否删除历史记录',
      }).then(() => {
        window.localStorage.removeItem('history')
        this.historyList = []
      })
    }
  }
};
</script>

<template>
  <div class="search">
    <!-- 顶部导航 -->
    <van-nav-bar title="搜索中心" left-arrow @click-left="$router.back()" />
    <!-- 搜索区域 -->
    <div class="sear">
      <div class="left">
        <van-icon class="icon-search" name="search" />
        <input @input="inputFn" class="ipt" type="text" v-model="key" placeholder="请输入搜索关键字">
      </div>
      <button class="btn" @click="toResult">搜索</button>
    </div>
    <!-- 历史记录 -->
    <van-cell-group v-if="!key">
      <van-cell class="mytitle" title="历史记录">
        <template>
          <van-icon @click="clear" name="cross" />
        </template>
      </van-cell>
      <van-cell @click="toHistoryResult(item)" v-for="(item, index) in historyList" :key="index" :title="item" />
    </van-cell-group>
    <!-- 联想区域 -->
    <van-cell-group v-else>
      <van-cell class="mytitle" title="联想区域" />
      <!-- <van-cell icon="search" v-for="(item,index) in thinkList" :key="index" :title="item" /> -->
      <van-cell @click="toThinkResult(item)" icon="search" v-for="(item,index) in thinkList" :key="index">
        <template>
          <span v-html="item"></span>
        </template>
      </van-cell>
    </van-cell-group>
  </div>
</template>

<style lang="less">
.search {
  font-size: 14px;
  .van-icon-arrow-left:before {
    color: #fff;
  }

  .sear {
    display: flex;
    padding: 8px;
    .left {
      flex: 1;

      border-radius: 17px;
      padding-left: 5px;
      height: 34px;

      background-color: #f7f8fa;

      line-height: 34px;
      .ipt {
        margin-left: 3px;
        border: none;
      }
    }
    .btn {
      border: none;
      width: 44px;
      height: 34px;

      background-color: #fff;

      color: #323233;
    }
  }

  .mytitle {
    font-weight: 700;
  }
}
</style>